<template>
    <ul class="articleitems">
        <li class="articleitem" v-for="item of data" :key="item.id">
            <a href="">
                <div class="articleitem-top">
                    <p>{{item.type}}</p>
                    <h3><a :href="'/webpage/articles/' + item.id">{{item.title}}</a></h3>
                </div>
            </a>

            <div class="articleitem-content">
                <figure>
                    <img :data-src="item.imgUrl" :alt="item.imgAlt" :title="item.imgTitle"/>
                </figure>
                <article>
                    <p>{{item.content}}</p>
                </article>
            </div>
            <div class="articleitem-bottom">
                <div class="articleitem-info">
                    <span><i class="articleitem-time" title="发布时间"/><time>{{item.time}}</time></span>
                    <span><i class="articleitem-views" title="浏览次数"/><span>{{item.views}}</span></span>
                    <span><i class="articleitem-messages" title="留言数"/><span>{{item.messages}}</span></span>
                </div>
                <ul class="articleitem-tags">
                    <li class="articleitem-tag" v-for="(its,index) of item.tags" :key="index">
                        <a :href="'/webpage/tags/' + its.tagId">{{its.tagName}}</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</template>

<script>
	export default {
		name: "ArticleItem",
        props:['data'],
        data(){
		    return {
		    	articleDomList:[],
			    imgDomList:[],
			    viewHeight:0
		    }
        },
        mounted(){
            this.articleDomList = document.querySelectorAll('.articleitem');
            this.imgDomList = document.querySelectorAll('.articleitem img');
            this.articleDomList = Array.from(this.articleDomList);
	        this.imgDomList = Array.from(this.imgDomList);
            this.viewHeight = window.innerHeight;
            window.onload = ()=>{
	            this.viewHeight = window.innerHeight;
            };
            window.onresize = ()=>{
	            this.viewHeight = window.innerHeight;
            };
            for(let i = 0;i < this.articleDomList.length ;i++){
	            if(this.articleDomList[i].getBoundingClientRect().y < this.viewHeight){
		            this.articleDomList[i].classList.add('showarticle');
		            this.articleDomList.splice(i,1);
		            this.imgDomList[i].src = this.imgDomList[i].getAttribute('data-src');
		            this.imgDomList.splice(i,1);
		            i--;
	            }
            }
            window.addEventListener('scroll',()=>{
            	for(let i = 0;i < this.articleDomList.length ;i++){
            		if(this.articleDomList[i].getBoundingClientRect().y < this.viewHeight){
			            this.articleDomList[i].classList.add('showarticle');
			            this.articleDomList.splice(i,1);
			            this.imgDomList[i].src = this.imgDomList[i].getAttribute('data-src');
			            this.imgDomList.splice(i,1);
			            i--;
                    }
                }
            })
        }
	}
</script>

<style scoped>
    a{
        text-decoration: none;
    }
    .articleitems{
        min-height: 1100px;
    }
    .articleitem{
        background-color:#fff;
        margin-bottom: 20px;
        padding:10px;
        border-radius: 5px;
        box-shadow: 3px 3px 5px #B7B7B7;
    }
    .showarticle{
        animation: showarticle 1s ease-in-out 1;
    }
    .articleitem-top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 5px;
        transform-origin: left;
    }
    .articleitem-top > p{
        font-size: 12px;
        padding: 3px 10px;
        background-color: #FF4500;
        color:#fff;
        position: relative;
        margin-right: 20px;
    }
    .articleitem-top > p::after{
        content: "";
        position: absolute;
        border: 5px solid transparent;
        border-left-color: #FF4500;
        right:-10px;
        top:50%;
        transform: translateY(-50%);
    }
    .articleitem-top > h3{
        color:#555;
        font-size: 16px;
        font-weight: bolder;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .articleitem-top > h3 a{
        transition: .5s;
    }
    .articleitem-top > h3:hover a{
        color:#FFA500;
    }

    .articleitem-content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:10px 0;
    }
    article p{
        transform-origin: left;
    }
    .articleitem-content > figure{
        border-radius: 5px;
        overflow: hidden;
    }
    figure > img{
        width: 100%;
        height: 100%;
        transition: 1s;
        transform-origin: center;
    }
    .articleitem:hover img{
        transform: scale(1.2);
    }
    .articleitem-content article{
        text-align: right;
    }
    .articleitem-content article > p{
        text-align: left;
        letter-spacing: 1px;
        color:#A37777;
        font-size: 14px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
    }


    .articleitem-bottom i{
        vertical-align: middle;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-size: cover;
    }
    .articleitem-time{
        background-image:url("../../static/icons/timer.png");
    }
    .articleitem-views{
        background-image:url("../../static/icons/eye.png");
    }
    .articleitem-messages{
        background-image:url("../../static/icons/message.png");
    }
    .articleitem-info,.articleitem-tags{
        display: flex;
        flex-wrap:wrap;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
    }
    .articleitem-info > span{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 10px;
        font-size: 12px;
        color: #7F828B;
    }
    .articleitem-info > span > i{
        margin-right: 5px;
    }
    .articleitem-tags{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .articleitem-tag{
        font-size: 12px;
        padding:2px 10px;
        margin-right: 20px;
        background-color: #FFA500;
        transition: .5s;
    }
    .articleitem-tag:hover{
        cursor: pointer;
        background-color: #7f828b;
    }
    .articleitem-tag a{
        color: #fff;
        transition: .5s;
    }
    @keyframes showarticle {
        0%{
            opacity: 0;
            transform: translateY(-20%);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
    @media screen and (min-width: 1000px){
        .articleitem-content > figure{
            width: calc(121px*1.5);
            height: calc(75px*1.5);
        }
        .articleitem-content article{
            width: 490px;
        }
        .articleitem-bottom{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
    @media screen and (min-width: 750px) and (max-width: 1000px){
        .articleitem-content figure{
            width: calc(121px*1.5);
            height: calc(75px*1.5);
        }
        .articleitem-content article{
            flex: 1;
            margin-left: 10px;
        }
        .articleitem-bottom{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
    @media screen and (max-width: 750px){
        .articleitems{
            min-height: 0;
        }
        .articleitem-top{
            transform: scale(.8);
        }
        .articleitem-content{
            margin: 5px 0;
        }
        .articleitem-content figure{
            width: 121px;
            height: 75px;
        }
        .articleitem-content article{
            flex: 1;
            margin-left: 10px;
        }
        .articleitem-content article > p{
            font-size: 12px;
            -webkit-line-clamp: 3;
            width: calc(100%/.8);
            transform: scale(.8);
        }
        .articleitem-info{
            margin-bottom: 5px;
            transform-origin: left;
            transform: scale(.9);
        }
        .articleitem-tag{
            transform: scale(.8);
        }
    }
</style>